<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展运算符...</title>
</head>

<body>
    <h3>扩展运算符...</h3>
    <p>
        数组的展开：
        当你想要将一个数组的元素作为参数传递给函数时，可以使用扩展运算符。
    </p>
    <p>
        复制数组：
        扩展运算符可以用来复制数组，它创建了数组元素的一个浅拷贝。
    </p>
    <p>
        合并数组：
        你可以使用扩展运算符来合并两个或多个数组。
    </p>
    <p>
        插入数组元素：
        扩展运算符可以在函数调用时，将数组元素作为独立的参数插入。
    </p>
    <p>
        对象的展开：
        在对象字面量中，扩展运算符可以用来插入多个属性。
    </p>
    <p>
        合并对象：
        扩展运算符可以用于合并多个对象。
    </p>
    <p>
        在解构赋值中使用：
        扩展运算符可以在解构赋值中使用，以获取数组的剩余元素。
    </p>
    <script>
        // 数组的展开：
        // 当你想要将一个数组的元素作为参数传递给函数时，可以使用扩展运算符。
        function sum(x, y, z) {
            return x + y + z;
        }
        const numbers = [1, 2, 3];
        const result1 = sum(...numbers); // 相当于调用 sum(1, 2, 3)
        const result2 = sum(numbers[0], numbers[1], numbers[2])
        console.log(result1); // 6
        console.log(result2); // 6


        // 复制数组：
        // 扩展运算符可以用来复制数组，它创建了数组元素的一个浅拷贝。
        let original = [[23, 34, 45], { a: 'a', b: 'b' }, 3]
        let copy = [...original]
        console.log('copy', copy); // [1, 2, 3]
        copy[0][0] = 666
        copy[0] = 9999
        copy[1].a = 'ccc'
        copy[2] = 888
        console.log('copy', copy); // [666, 2, 3]
        console.log('original', original); // [1, 2, 3]

        // 合并数组：
        // 你可以使用扩展运算符来合并两个或多个数组。
        const first = [1, 2]
        const sencond = [3, 4]
        const combined = [...first, ...sencond]
        console.log(combined); // [1, 2, 3, 4]


        // 插入数组元素：
        // 扩展运算符可以在函数调用时，将数组元素作为独立的参数插入。
        function push(array, ...items) {
            array = [999]
            console.log('items', items);
            items.forEach(item => array.push(item));
            console.log('array', array);
        }
        const stack = ['a', 'b', 'c', 'd'];
        push(stack, 'e', 'f', 'g');
        console.log('stack', stack);


        // 对象的展开：
        // 在对象字面量中，扩展运算符可以用来插入多个属性、修改属性值
        const defaults = { food: 'pasta', price: 5, vegan: false };
        const order = { ...defaults, price: 10, vegan: true, count: 18 };
        console.log(order);  // {food: 'pasta', price: 10, vegan: true, count: 18}

        // 合并对象：
        // 扩展运算符可以用于合并多个对象。
        const obj1 = { a: 1, b: 2 };
        const obj2 = { b: 3, c: 4 };
        const combined2 = { ...obj1, ...obj2, d: 5, e: 6 };
        console.log(combined2); // {a: 1, b: 3, c: 4, d: 5, e: 6}


        // 在解构赋值中使用：
        // 扩展运算符可以在解构赋值中使用，以获取数组的剩余元素。
        const [first2, ...rest] = [1, 2, 3, 4];
        // first2 为 1, rest 为 [2, 3, 4]
    </script>
</body>

</html>